<template>
  <div class="container">
    <div class="leftWrapper">
      <div class="logo">
        <el-image
          :src="require('../../assets/flysee_logo_long2.jpg')"
          alt=""
          fit="cover"
        />
      </div>
    </div>

    <div class="rightWrapper">
      <div class="mainCard noneBg">
        <div class="initInvite">
          <div v-if="inviteInfo.valid" class="validInvite">
            <div class="inviteBall">{{ inviteInfo.org_name[0] }}</div>
            <div class="inviteTitle">{{ inviteInfo.org_name }}</div>
            <div class="inviteTip">{{ inviteInfo.dept_name }}</div>
            <div class="inviteUser">{{ inviteInfo.inviter }}邀请你加入</div>
            <div class="inviteTip">接受邀请加入对方组织部门</div>
            <div class="inviteButton">
              <el-button type="primary" @click="inviteAccept">
                接受邀请
              </el-button>
            </div>
          </div>
          <div v-else class="noneInvite">
            <el-result icon="warning">
              <div class="initIcon" slot="icon">
                <svg-icon icon-class="new_warning"></svg-icon>
              </div>
              <div class="initTitle" slot="title">链接已过期</div>
              <div class="initSubTitle" slot="subTitle">
                你可联系管理员或组织成员重新分享
              </div>
            </el-result>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Invite",
  props: {},
  components: {},
  data() {
    return {
      inviteInfo: null,
    };
  },
  created() {
    this.inviteInfo = this.$store.getters.inviteInfo;
    console.log(this.inviteInfo);
  },
  methods: {
    // 接受邀请
    inviteAccept() {
      this.$router.push("/login");
    },
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
$bg: #f2f2f2;
$dark_gray: #889aa4;
$light_gray: #eee;

.container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;
  overflow: hidden;
  display: flex;
  padding: 0 100px;
  .leftWrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .logo {
      width: vh(350);
      height: vh(350);
      border-radius: 20px;
      overflow: hidden;
      .el-image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .rightWrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .mainCard {
      background-color: #fff;
      height: vh(800);
      width: vw(500);
      border-radius: 20px;
      &.noneBg {
        background-color: transparent;
      }
      .initInvite {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        .validInvite {
          width: 100%;
          padding: 0 30px;
          display: flex;
          flex-direction: column;
          align-items: center;
          .inviteBall {
            font-size: 40px;
            background-color: #00c8ad;
            color: #fff;
            width: 70px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-bottom: 20px;
          }
          .inviteTitle {
            font-size: 25px;
            margin-bottom: 10px;
          }
          .inviteTip {
            color: #999;
          }
          .inviteUser {
            margin-bottom: 20px;
            margin-top: 10px;
            font-weight: 700;
            font-size: 40px;
          }
          .inviteButton {
            margin-top: 20px;
            width: 100%;
            .el-button {
              width: 100%;
              background-color: #457cff;
              font-size: 20px;
              border-radius: 10px;
            }
          }
        }
        .noneInvite {
          .initIcon {
            .svg-icon {
              color: #02a7f0;
              font-size: 100px;
            }
          }
          .initTitle {
            font-size: 40px;
            font-weight: 700;
            margin-bottom: 10px;
          }
          .initSubTitle {
            color: #999;
          }
        }
      }
      .acceptInvite {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 50px 30px;
        .back {
          color: #999;
          cursor: pointer;
        }
        .acceptBody {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          flex: 1;
          .bodyTitle {
            font-weight: 700;
            font-size: 50px;
            margin-bottom: 20px;
          }
          .bodyTip {
            color: #999;
            font-size: 20px;
            padding: 0 20px;
          }
        }
        .acceptFooter {
          .el-button {
            width: 100%;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
